<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>类型:</span>
        <el-select v-model="typeMsg" size="small">
          <el-option v-for="item in type" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="teacherName" size="small" class="sceSelect">
          <el-option v-for="item in teacherArray" :label="item" :value="item"></el-option>
        </el-select>
        <el-button type="primary" size="small">搜索</el-button>
        <el-button type="primary" size="small">导出</el-button>
      </div>
    </div>
    <div class="model mywork">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title" :class="{'titles': titles}" @click="changeTable">代看课审批</span>
      <span class="sectitle" :class="{'sectitles': sectitles}" @click="changeTable">调课审批</span>
      <div class="kong"></div>
      <div v-if="tables === true">
        <template>
          <el-table :data="tablemsg" style="width: 100%">
            <el-table-column prop="id" label="#" width="60" align="center"></el-table-column>
            <el-table-column prop="schoolId" label="授课老师" align="center"></el-table-column>
            <el-table-column prop="schoolId" label="年级" align="center"></el-table-column>
            <el-table-column prop="typeName" label="班级" align="center"></el-table-column>
            <el-table-column prop="repairName" label="类型" align="center"></el-table-column>
            <el-table-column prop="class" label="课程" align="center"></el-table-column>
            <el-table-column prop="time" label="时间" align="center"></el-table-column>
            <el-table-column prop="teacher" label="代看课教师" align="center" width="110"></el-table-column>
            <el-table-column prop="jieci" label="节次" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="time2" label="审批时间" align="center" width="100"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template scope="scope">
                <el-button type="text" size="small">操作</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-show="paging"
            @current-change="handleCurrentChange"
            :page-size="20"
            layout="prev, pager, next, jumper"
            :total="total"
            class="pull-right">
          </el-pagination>
        </template>
      </div>
      <div v-if="tables === false">
        <template>
          <el-table :data="tablemsg" style="width: 100%">
            <el-table-column prop="id" label="#" width="60" align="center"></el-table-column>
            <el-table-column prop="schoolId" label="授课老师" align="center"></el-table-column>
            <el-table-column prop="typeName" label="年级" align="center"></el-table-column>
            <el-table-column prop="repairName" label="班级" align="center"></el-table-column>
            <el-table-column prop="class" label="课程" align="center"></el-table-column>
            <el-table-column prop="time" label="调课时间" align="center"></el-table-column>
            <el-table-column prop="jieci" label="节次" align="center"></el-table-column>
            <el-table-column prop="repairName" label="调课教师" align="center" width="110"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="stime" label="审批时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template scope="scope">
                <el-button type="text" size="small">同意</el-button>
                <el-button type="text" size="small">拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-show="paging"
            @current-change="handleCurrentChange"
            :page-size="20"
            layout="prev, pager, next, jumper"
            :total="total"
            class="pull-right">
          </el-pagination>
        </template>
      </div>
    </div>

    <!-- <div class="details" v-show="newShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="pink">
      <span class="title">新增类别</span>
      <el-button icon="close" class="close" @click="newAdd()"></el-button>
      <div class="content">
        <div class="line">
          <span>类别名称:</span>
          <input type="text" class="inputText" v-model="name">
        </div>
        <div class="line">
          <span>维修人员:</span>
          <input type="text" class="inputText" v-model="people">
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <el-checkbox v-model="checked">继续新建</el-checkbox>
        </div>
        <div class="right">
          <el-button type="success" @click="keepAddData">确定</el-button>
          <el-button @click="newAdd">取消</el-button>
        </div>
      </div>
    </div> -->

    <!-- <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="newShow"></div>
    </transition> -->
  </section>
</template>

<script>
export default {
  data () {
    return {
      typeMsg: null,
      type: [],
      teacherName: null,
      teacherArray: [],
      tables: true,
      titles: true,
      sectitles: false,
      total: 0,
      page: 1,
      paging: true,
      tablemsg: []
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    // this.xtoken = {'yxt-xtoken': _cookieArray[0].value}
    // this.$http.post(this._httpUrl + 'fault/repair/type/query', {}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //   if (response.body.code === '000') {
    //     // console.log(response.data.data.content)
    //     this.tablemsg = response.data.data.rows
    //   } else {
    //     this.$route.push('/login')
    //   }
    // })
  },
  methods: {
    changeTable () {
      this.tables = !this.tables
      if (this.tables === true) {
        this.titles = true
        this.sectitles = false
      } else {
        this.titles = false
        this.sectitles = true
      }
    },
    // mDelete (index, row, ev) {
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   this.xtoken = {'yxt-xtoken': _cookieArray[0].value}
    //   this.$http.post(this._httpUrl + 'fault/repair/type/del?typeId=' + parseInt(ev.path[4].cells[0].innerText), {}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //   })
    //   this.tablemsg.splice(index, 1)
    // },
    // nameSearch () {
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   this.xtoken = {'yxt-xtoken': _cookieArray[0].value}
    //   this.$http.post(this._httpUrl + 'fault/repair/type/query', {
    //     page: this.page,
    //     rows: '20',
    //     typeName: this.typeName
    //   }, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //     if (response.body.code === '000') {
    //       // console.log(response.data.data.content)
    //       this.tablemsg = response.data.data.rows
    //     } else {
    //       this.$route.push('/login')
    //     }
    //   })
    // },
    // newAdd () {
    //   this.newShow = !this.newShow
    // },
    // keepAddData () {
    //   if (this.checked === true) {
    //     this.name = null
    //     this.people = null
    //   }
    // },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    }
  }
}
</script>

<style lang="less" scoped>
  header{
    .field{
      display: inline-block;
    }
    .right{
      width: 15%;
      float: right;
      .user{
        display: inline-block;
        margin-left: 20%;
      }
    }
  }
  .model{
    width: 98%;
    position: relative;
    background: #FFF;
    margin-left: 1%;
    margin-top: 60px;
    border-radius: 5px;
    padding-top: 10px;
    .body{
      .sceSelect{
        margin-left: 10%;
      }
      .right{
        float: right;
      }
    }
  }
  .kong{
    padding: 20px;
  }
  .mywork{
    .pink{
      position: absolute;
      left: 2%;
      top: -20px;
    }
    .title{
      margin-left: 11%;
      cursor:pointer
    }
    .titles{
      margin-left: 11%;
      color: #FB7862;
      border-bottom: 1px solid #FB7862;
      cursor:pointer
    }
    .sectitle{
      margin-left: 2%;
      cursor:pointer
    }
    .sectitles{
      margin-left: 2%;
      color: #FB7862;
      border-bottom: 1px solid #FB7862;
      cursor:pointer
    }
  }
  .details{
    width: 30%;
    position: fixed;
    left: 50%;
    top: 150px;
    margin-left: -15%;
    background: #FFF;
    border-radius: 5px;
    padding-top: 10px;
    .inputText{
      width: 60%;
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .pink{
      position: absolute;
      left: 2%;
      top: -20px;
    }
    .title{
      margin-left: 20%;
    }
    .content{
      margin-top: 35px;
      padding-left: 30px;
      .line{
        margin-bottom: 20px;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -10px;
      margin-right: -10px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .input{
    width: 20%;
  }
</style>
